<template>
    <div class="nav-menu">
        <ul class="menu bg-base-100 w-56 p-2 rounded-box shadow-xl">
            <template v-for="(item, index) in navmenuList" :key="index">
                <router-link :to="item.path">
                    <li>
                        <a>
                            <p v-html="item.svg"></p>{{ item.name }}
                        </a>
                        <ul class="rounded-box p-2 bg-base-100">
                            <template v-if="item.children">
                                <template v-for="(children,index) in item.children">
                                    <li :tabindex="index">
                                        <router-link :to="children.path">
                                            {{ children.name }}
                                        </router-link>
                                    </li>
                                </template>
                            </template>
                        </ul>
                    </li>
                </router-link>
            </template>
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { navmenuList } from '@/global/menu';


export default defineComponent({
    setup() {
        return {
            navmenuList
        };
    },
});
</script>

<style scoped lang="less"></style>
